<template>
  <div>
    <el-button class="btnList" @click="handleEvent(item.flag)" v-for="(item, index) in btn"
      v-show="btnList.indexOf(item.flag) !== -1" :key="index" :plain="item.plain" :type="item.type">
      <span v-if="!item.icon.includes('el-icon')" class="icon iconfont">{{ iconfont(item.icon) }}</span>
      <i v-else :class="item.icon"></i>
      {{ item.name }}</el-button>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    btnList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      // icon使用的是iconfont图标
      btn: [
        {
          flag: "add",
          icon: "&#xe604;",
          type: "primary",
          plain: true,
          name: "添 加",
        },
        {
          flag: "save",
          icon: "&#xe604;",
          type: "primary",
          plain: true,
          name: "保 存",
        },
        {
          flag: "add_gl",
          icon: "&#xe604;",
          type: "primary",
          plain: true,
          name: "添加管理批次",
        },
        {
          flag: "add_sc",
          icon: "&#xe604;",
          type: "primary",
          plain: true,
          name: "添加生产批次",
        },
        {
          flag: "add_yz",
          icon: "&#xe604;",
          type: "primary",
          plain: true,
          name: "添加养殖批次",
        },
        // 'add_gl','add_sc','add_yz'
        {
          flag: "edit",
          icon: "&#xe60b;",
          type: "success",
          plain: true,
          name: "编 辑",
        },
        {
          flag: "funcAuthShow",
          icon: "&#xe60b;",
          type: "warning",
          plain: true,
          name: "功能权限",
        },
        {
          flag: "delete",
          icon: "&#xe61f;",
          type: "info",
          plain: true,
          name: "删 除",
        },
        {
          flag: "import",
          icon: "&#xe62d;",
          type: "warning",
          plain: true,
          name: "导 入",
        },
        {
          flag: "export",
          icon: "&#xe610;",
          type: "warning",
          plain: true,
          name: "导 出",
        },
        {
          flag: "downLoad",
          icon: "&#xe610;",
          type: "warning",
          plain: true,
          name: "下载模板",
        },
        {
          flag: "submitData",
          icon: "&#xe610;",
          type: "warning",
          plain: true,
          name: "提交数据",
        },
        {
          flag: "sort",
          icon: "&#xe610;",
          type: "warning",
          plain: true,
          name: "排 序",
        },
        {
          flag: "sync",
          icon: "el-icon-refresh-right",
          type: "primary",
          plain: true,
          name: "同步数据",
        },
      ],
    };
  },

  mounted() { },
  methods: {
    handleEvent(flag) {
      this.$emit("handleEvent", flag);
    },
    iconfont(icon) {
      const reg = /(&#x)?(.*)/;
      let iconfontName;
      if (reg.test(icon)) {
        iconfontName = reg.exec(icon)[2];
      }
      return String.fromCharCode(parseInt(iconfontName, 16));
    },
  },
};
</script>
<style lang="scss" scoped>
.btnList,
.iconfont {
  font-size: 12px;
}
</style>